<template>
  <div class="dmform dmform-right" v-loading="loading">
    <Tabs default-active-key="1" tabPosition="left" :animated="false" :style="{height: pageHeight+'px'}">
      <TabPane label="基本信息">
        <div class="dmform-groups" :style="{maxHeight:pageHeight-50+'px'}" style="padding-top: 10px;">
          <a-form-model ref="form" :model="formData" :rules="formRules" :label-col="formLabelCol" :wrapper-col="formWrapperCol">
            <div class="dmform-group">
              <a-form-model-item prop="name" has-feedback label="员工姓名" help="员工真实姓名。">
                <a-input v-model="formData.name" v-focus />
              </a-form-model-item>
              <a-form-model-item prop="tel" has-feedback label="手机号码" help="员工登录系统时，手机号码可作为登录账号。">
                <a-input v-model="formData.tel" />
              </a-form-model-item>
              <a-form-model-item prop="sex" label="性别" help="">
                <a-radio-group name="radioGroup" v-model="formData.sex">
                  <a-radio value="1">男</a-radio>
                  <a-radio value="2">女</a-radio>
                </a-radio-group>
              </a-form-model-item>
            </div>
            <div class="dmform-group-title">职位信息</div>
            <div class="dmform-group">
              <a-form-model-item label="主工作单位" help="员工只能有一个主工作单位。">
                <a-input :value="formData.orgFullName || formData.orgName" disabled />
              </a-form-model-item>
              <a-form-model-item label="主职位(岗位)" help="员工只能有一个主工作职位(岗位)。">
                <ComboTreeSelect v-model="formData.postId"
                                 :nameValue="formData.postName"
                                 dataUrl="/jsofted/post/tree"
                                 :query-params="postQueryParams"
                                 placeholder="请选择岗位"
                                 :dataFields="{
                                   title: 'name',
                                   value: 'id',
                                   key: 'id'
                                 }"
                />
              </a-form-model-item>
              <a-form-model-item v-if="pageParams.id" label="一人多岗" help="员工可以有多个附加工作职位(岗位)。">
                <TreeCascaderDialog multiple tree-result
                                    :panel1="postCascaderPanel1"
                                    :panel2="postCascaderPanel2"
                                    :results="postCascaderResults" />
              </a-form-model-item>
            </div>
            <div class="dmform-group-title">账号信息</div>
            <div class="dmform-group">
              <a-form-model-item label="登录账号" help="登录系统时的登录账号，自动生成的登录账号为真实姓名拼音首字母 + 。">
                <a-input v-model="formData.username">
                  <a-button slot="addonAfter" type="link" size="small" @click="doAutoUsername">自动生成</a-button>
                </a-input>
              </a-form-model-item>
              <a-form-model-item label="登录密码" help="员工登录系统时，必须输入登录密码；初始密码：P+手机号码。">
                <a-input-password :value="formData.password" disabled>
                  <a-button slot="addonAfter" type="link" size="small" @click="doResetPassword">重置密码</a-button>
                </a-input-password>
              </a-form-model-item>
            </div>
          </a-form-model>
        </div>
        <div class="dmform-bottom">
          <a-button @click="doSubmit" type="primary" :loading="submitting">{{ saveButtonText }}</a-button>
        </div>
      </TabPane>
      <TabPane label="权限设置" :disabled="!pageParams.id">
        <div class="dmform-groups" style="padding-top: 10px;" :style="{maxHeight:pageHeight+'px'}">
          <div class="dmform-group" style="padding: 20px;">
            <a-form-model-item help="选中的角色即为员工的功能权限。">
              <TreeTransfer
                  left-data-url="/jsofted/role/tree"
                  :leftQueryParams="roleQueryParams"
                  right-add-url="/jsofted/userRole/add"
                  right-delete-url="/jsofted/userRole/deleteBy"
                  leftField="userId"
                  rightField="roleId"
                  :leftValue="pageParams.id"
                  left-title="可以选择的角色"
                  right-title="已经选中的角色"
              />
            </a-form-model-item>
          </div>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import {Tabs,TabPane} from 'element-ui'
import DataFormJS from '@/utils/DataFormUtils'

import ComboTreeSelect from '@/components/TreeData/ComboTreeSelect.vue'

export default {
  components: { ComboTreeSelect, Tabs, TabPane },
  mixins: [DataFormJS],
  computed: {
    postQueryParams() {
      return {
        orgId: this.formData.orgId || '-1'
      }
    },
    roleQueryParams() {
      return {
        tenantId: this.$loginInfo.tenantId
      }
    },
    /**
     * 人员职位中间表编辑器参数——右表参数
     * 关联的第1个右表为单位表；
     * 关联的第2个右表为职位表；
     */
    postCascaderPanel1() {
      return {
        dataUrl: '/jsofted/org/tree',
        title: '第1步：选择单位',
        emptyText: '暂无单位选项'
      }
    },
    postCascaderPanel2() {
      return {
        dataUrl: '/jsofted/post/tree',
        casField: 'orgId',
        title: '第2步：选择职位',
        emptyText: '暂无职位选项'
      }
    },
    /**
     * 人员职位中间表编辑器参数——中间表参数
     */
    postCascaderResults() {
      return {
        dataUrl: '/jsofted/userPost/list',
        leftField: 'userId',
        leftValue: this.formData.id,
        rightField1: 'orgId',
        rightNameField1: 'orgFullName',
        rightField2: 'postId',
        rightNameField2: 'postName',
        saveUrl: '/jsofted/userPost/deleteThenAdd',
        emptyText: '暂无选中的职位'
      }
    },
  },
  data() {
    return {
      loadUrl: '/jsofted/user/get/',
      addUrl: '/jsofted/user/add',
      updateUrl: '/jsofted/user/update/',
      formData: {
        // 基本信息
        id: '',
        name: '',
        tel: '',
        sex: '',
        // 岗位信息
        orgId: '',
        orgName: '',
        orgFullName: '',
        postId: '',
        postName: '',
        // 账号信息
        username: null,
        password: '',
      },
      password: '',
      formRules: {
        name: [
          { required: true, message: '不能为空！', trigger: 'change' },
          { min: 2, max: 8, message: '长度为2-8个字！', trigger: 'change' },
        ],
        tel: [
          { required: true, message: '不能为空！', trigger: 'change' },
          { pattern: '^1[3|4|5|7|8][0-9]{9}$', message: '电话号码格式不正确！', trigger: 'change' },
        ],
        sex: [
          { required: true, message: '必选项！', trigger: 'change' },
        ],
      },
    }
  },
  watch: {
    'formData.tel': function(v) {
      if (!this.password) {
        this.formData.password = v ? ('P' + v) : ''
      }
    }
  },
  methods: {
    initFormData(obj) {
      this._initFormData(obj)
      //
      this.password = obj.password || ''
    },
    doResetPassword() {
      this.password = ''
      this.formData.password = this.formData.tel ? ('P' + this.formData.tel) : ''
    },
    doAutoUsername() {
      if (!this.formData.name) {
        this.$message.error('请先输入真实姓名！')
      }
      const url = '/jsofted/user/autoUsername/' + this.formData.name
      this.$http.post(url).then((rs) => {
        const result = rs.data
        if (result.success) {
          this.formData.username = result.data
          this.$message.success(result.message);
        } else {
          this.$message.error(result.message)
        }
      })
    }
  }
}
</script>
